<div class="card">
    <div class="card-header">
      <button id="addAdminBtn" type="button" class="btn btn-primary" data-toggle="modal"
        data-target="#modal-default">添加管理员</button>
    </div>
    <!-- /.card-header -->
    <div class="card-body" id="adminTable">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th style="width: 10px">#</th>
            <th>Task</th>
            <th>Progress</th>
            <th style="width: 40px">Label</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1.</td>
            <td>Update software</td>
            <td>
              <div class="progress progress-xs">
                <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
              </div>
            </td>
            <td><span class="badge bg-danger">55%</span></td>
          </tr>
          <tr>
            <td>2.</td>
            <td>Clean database</td>
            <td>
              <div class="progress progress-xs">
                <div class="progress-bar bg-warning" style="width: 70%"></div>
              </div>
            </td>
            <td><span class="badge bg-warning">70%</span></td>
          </tr>
          <tr>
            <td>3.</td>
            <td>Cron job running</td>
            <td>
              <div class="progress progress-xs progress-striped active">
                <div class="progress-bar bg-primary" style="width: 30%"></div>
              </div>
            </td>
            <td><span class="badge bg-primary">30%</span></td>
          </tr>
          <tr>
            <td>4.</td>
            <td>Fix and squish bugs</td>
            <td>
              <div class="progress progress-xs progress-striped active">
                <div class="progress-bar bg-success" style="width: 90%"></div>
              </div>
            </td>
            <td><span class="badge bg-success">90%</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="modal fade show" id="modal-default" style="display: none; padding-right: 17px;" aria-modal="true"
    role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">添加管理员</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="clossAdd">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <form name="adminForm">
            <div class="form-group">
              <label for="adminName">管理员账号</label>
              <input name="adminName" type="text" class="form-control" id="adminName" placeholder="请输入管理员账号">
            </div>
            <div class="form-group">
              <label for="password">管理员密码</label>
              <input name="password" type="password" class="form-control" id="passWord" placeholder="请输入管理员密码">
            </div>
            <div class="form-group">
              <label for="rePassword">重复密码</label>
              <input name="rePassword" type="password" class="form-control" id="rePpassWord" placeholder="请再次输入管理密码">
            </div>
          </form>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" id="closeAdminBtn" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="saveAdminBtn">保存</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>